<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-创建组件的步骤</title>
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <div id="demo"></div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        // ** vue就是玩配置的，不断解放和细化主配置的文件，才能让项目更加清晰和可维护

        // 1.0 创建组件 - 子组件
        const School = Vue.extend({
            // 只会影响vue开发工具中组件的名称
            name: 'School',
            // 子类的数据
            data() {
                return {
                    str: '尚硅谷',
                    num: 0
                }
            },
            template: `
                <div>
                    <p>{{ str }} {{ num }}</p>
                    <button @click="num++">点击更改</button>
                </div>
            `
        })
    

        new Vue({
            el: '#demo',
            // 2.0 挂载到根组件上
            components: {
                School
            },
            // 3.0 在父组件中使用
            // <XueXiao></XueXiao>
            // <xue-xiao></xue-xiao>
            // <School />
            template: `
                <div>
                    <School />
                    <hr />
                    <School />
                </div>
            `
        })
    </script>
</body>
</html>